<template>
  <div class="attend_detail">
    <div class="attend_detail_left">
      <div class="info_detail_title">
        <div class="opera-left">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            v-if="['3', '4'].includes(detail.status)"
            @click="edit()">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-document-delete"
            v-if="detail.isCanZZ === '1'"
            @click="approvalData('5')">
            终止
          </el-button>
          <el-button
            size="mini"
            type="warning"
            plain
            icon="el-icon-s-promotion"
            v-if="detail.canRevoke === '1'"
            @click="approvalData('4')">
            撤回
          </el-button>
        </div>
        <span class="title_name">出差审批表</span>
        <div class="opera-right">
          <el-button size="mini" type="primary" @click="exportData">导出</el-button>
        </div>
      </div>
      <div class="right_box">
        <div class="attend_main">
          <div class="add_info">
            <div class="title_org">出差部门：{{ checkForm.orgName }}</div>
          </div>
          <div class="add_table" ref="add_table">
            <div class="add_tab">
              <div class="table_line line_th">
                <div class="table_tit">姓名</div>
                <div class="table_con">{{ checkForm.userName }}</div>
                <div class="table_tit">职务</div>
                <div class="table_con">{{ checkForm.post }}</div>
              </div>
              <div class="table_line">
                <div class="table_tit">陪同人员</div>
                <div class="table_con con_all">
                  <template v-if="checkForm.accompanyList && checkForm.accompanyList.length">
                    <span v-for="(item, index) in checkForm.accompanyList" :key="item.accompanyId" class="partner">
                      {{ item.accompanyName }}（{{ item.accompanyPost }}）
                      <span v-if="index < checkForm.accompanyList.length - 1">、</span>
                    </span>
                  </template>
                  <span v-else>无</span>
                </div>
              </div>
              <div class="table_line">
                <div class="table_tit">出差事由</div>
                <div class="table_con con_all">
                  {{ checkForm.reimburseReason }}
                </div>
              </div>
              <div class="table_line">
                <div class="table_tit">出差时间</div>
                <div class="table_con con_all" style="justify-content: center">
                  <span v-if="checkForm.startTime && checkForm.endTime">
                    {{ checkForm.startTime.slice(0, -3) }} — {{ checkForm.endTime.slice(0, -3) }}
                  </span>
                </div>
              </div>
              <div class="table_line">
                <div class="table_tit">出发地</div>
                <div class="table_con con-padding">
                  {{ checkForm.startPlace }}
                </div>
                <div class="table_tit">目的地</div>
                <div class="table_con con-padding">
                  {{ checkForm.leavePlace }}
                </div>
              </div>
              <div class="table_line">
                <div class="table_tit">交通工具</div>
                <div class="table_con con_all con_trans">
                  <el-radio-group v-model="checkForm.transportation" disabled>
                    <el-radio label="1">公共交通-火车/高铁/客车/飞机</el-radio>
                    <el-radio label="2">公车</el-radio>
                    <el-radio label="3">平台租赁</el-radio>
                    <el-radio label="4">其他(请注明)</el-radio>
                  </el-radio-group>
                  <el-input
                    class="week_input"
                    placeholder="请注明其他"
                    v-model="checkForm.transportationRemark"
                    size="mini"
                    v-if="checkForm.transportation === '4'"
                    readonly></el-input>
                </div>
              </div>
            </div>
            <div class="add_annex">
              <div class="annex_label">附件：</div>
              <div class="annex_upload">
                <UploadPreview :file-list="checkForm.enclosureList" layout="list"></UploadPreview>
              </div>
            </div>
          </div>
        </div>
        <div class="btn_check" v-if="detailInfo.saveStatus === '0'">
          <el-button size="small" type="primary" plain @click="edit()">编 辑</el-button>
          <el-button size="small" type="primary" @click="save()">提 交</el-button>
        </div>
        <div class="btn_check" v-if="firstType === '3' && detailInfo.saveStatus === '1' && detailInfo.status === '0'">
          <el-button size="small" type="primary" @click="approvalData('1')">通 过</el-button>
          <el-button size="small" type="danger" @click="approvalData('2')">不通过</el-button>
          <el-button size="small" type="danger" @click="approvalData('3')">退回</el-button>
        </div>
      </div>
    </div>
    <div class="attend_detail_r">
      <div class="add_r_title">审批流程</div>
      <expenseSteps ref="refsFlow" :activeInfo="detailInfo" />
    </div>
    <XnDialog
      title="审批意见"
      :visible.sync="dialogShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="50%"
      left="10vw"
      class="branch_dialog"
      @closed="dialogShow = false">
      <el-input
        type="textarea"
        v-model="suggest"
        placeholder="请输入审批意见"
        rows="5"
        maxlength="50"
        show-word-limit></el-input>
      <div class="btn_save">
        <el-button class="btnBorder" size="medium" @click="dialogShow = false">取 消</el-button>
        <el-button size="medium" class="btnBg" type="primary" @click="submit('2')">确认提交</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import expenseSteps from './expenseSteps'
import UploadPreview from '@com/UploadPreview/index.vue'
import {
  getTripReimburseDetail,
  approveFormExpense,
  updateTripReimburse,
  exportTripReimburseDoc,
} from '@apis/api-dailyManage.js'
import moment from 'moment'
import XnDialog from '@com/xnDialog.vue'
import { cloneDeep } from 'lodash'
export default {
  components: {
    expenseSteps,
    UploadPreview,
    XnDialog,
  },
  props: {
    userType: {
      type: String,
      default: '',
    },
    firstType: {
      type: String,
      default: '',
    },
    activeInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      moment: moment,
      detail: {},
      detailInfo: {},
      dialogShow: false,
      suggest: '',
      checkForm: {
        id: '',
        formTitle: '出差审批表',
        formType: '1',
        accompanyList: [],
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        transportation: '',
        isUseCar: '0',
        transportationRemark: '',
        userId: localStorage.pskh_userId,
        userName: JSON.parse(localStorage.PSKH_USERINFO).userName,
        orgId: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgName,
        post: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.postName,
        enclosureList: [],
      },
      approveType: '',
    }
  },
  watch: {
    activeInfo: {
      handler(news) {
        if (news.id) {
          this.detail = news
          this.getTripReimburseDetail()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    if (this.$route.query.id && this.$route.query.type === '2') {
      this.detail = cloneDeep(this.$route.query)
      this.getTripReimburseDetail()
    }
    if (this.$route.query.id) {
      this.clearUrl()
    }
  },
  methods: {
    approvalData(type) {
      this.approveType = type
      this.suggest = ''
      if (['2', '3'].includes(type)) {
        this.dialogShow = true
      } else if (['4', '5'].includes(type)) {
        const str = type === '4' ? '确认撤回该审批表吗？' : '确认终止该审批表吗？'
        this.$confirm(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.submit()
          })
          .catch(() => {})
      } else {
        this.submit()
      }
    },
    getTripReimburseDetail() {
      getTripReimburseDetail({
        id: this.detail.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          const enclosureList = res.data.enclosureList || []
          this.checkForm = Object.assign(this.checkForm, this.detailInfo, enclosureList)
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    submit(type) {
      if (['2', '3'].includes(this.approveType) && this.suggest.trim().length === 0) {
        this.$message.warning('请填写审批意见')
        return
      }
      approveFormExpense({
        content: this.suggest || '',
        id: this.detailInfo.id,
        processInstanceId: this.detailInfo.processInstanceId,
        status: this.approveType,
        taskId: this.detailInfo.taskId || '',
      }).then(res => {
        if (res.code === 0) {
          this.dialogShow = false
          if (['4', '5'].includes(this.approveType)) {
            const str1 = this.approveType === '4' ? '撤回成功' : '终止成功'
            this.$message.success(str1)
          } else {
            this.$message.success('审批成功')
          }
          this.$emit('addSuccess', 'detail')
        }
      })
    },
    edit() {
      this.$emit('editDia', this.checkForm)
    },
    save() {
      if (!this.detailInfo.reimburseReason.trim().length) {
        return this.$message.warning('请编辑出差事由')
      }
      if (!this.detailInfo.startTime || !this.detailInfo.endTime) {
        return this.$message.warning('请编辑出差时间')
      }
      if (!this.detailInfo.startPlace.trim().length) {
        return this.$message.warning('请编辑出发地')
      }
      if (!this.detailInfo.leavePlace.trim().length) {
        return this.$message.warning('请编辑目的地')
      }
      if (!this.detailInfo.transportation) {
        return this.$message.warning('请编辑交通工具')
      }
      if (this.detailInfo.transportation === '4' && !this.detailInfo.transportationRemark.trim().length) {
        return this.$message.warning('请编辑其他类型交通工具')
      }
      if (this.detailInfo.enclosureList.length === 0) {
        return this.$message.warning('请上传相关附件')
      }
      const param = {
        ...this.detailInfo,
        saveStatus: '1',
      }
      this.$confirm('请确认当前出差信息是否正确，确定后不可修改。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          updateTripReimburse(param).then(res => {
            if (res.code === 0) {
              this.$message.success('提交成功')
              this.$emit('addSuccess', '1')
            }
          })
        })
        .catch(() => {})
    },
    seqDeal(i) {
      return i < 10 ? '0' + i : i
    },
    exportData() {
      const req = `?id=${this.detail.id}`
      const link = document.createElement('a')
      link.target = 'targetName'
      link.href = exportTripReimburseDoc(req)
      link.click()
      link.remove()
    },
    clearUrl() {
      const url = window.location.href
      const urlArr = url.split('?')
      window.history.replaceState(null, null, urlArr[0])
      this.$route.query.id = ''
      this.$route.query.type = ''
      this.$route.query.formType = ''
      this.$route.query.flag = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_detail {
  height: 100%;
  font-size: 15px;
  display: flex;
  overflow: auto;
  .attend_detail_left {
    height: 100%;
    // width: calc(100% - 300px);
    flex: 1;
    min-width: 760px;
  }
  .attend_detail_r {
    flex: 1;
    width: 300px;
    min-width: 300px;
    height: 99%;
    padding: 10px;
    border-left: 1px solid #ececec;
    overflow-y: auto;
    margin-bottom: 10px;
    min-height: 380px;
    .add_r_title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .info_detail_title {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 20px;
    padding-left: 20px;
    text-align: center;
    position: relative;
    .opera-right {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    .opera-left {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .right_box {
    height: calc(100% - 60px);
    width: 100%;
    .attend_main {
      width: 100%;
      padding: 0 20px;
      height: calc(100% - 50px);
      margin: 0 auto;
      overflow-y: auto;
    }
    .add_table {
      .add_tab {
        margin-top: 15px;
        border-top: 1px solid #d0d7e0;
        border-left: 1px solid #d0d7e0;
        .table_line {
          display: flex;
          align-items: stretch;
          justify-content: space-around;
          color: #333333;
          .table_tit {
            padding: 15px 0;
            font-weight: 600;
            font-size: 15px;
            background-color: #e9eff48f;
          }
          .table_tit,
          .table_con {
            width: 25%;
            border-right: 1px solid #d0d7e0;
            border-bottom: 1px solid #d0d7e0;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .con-padding {
            padding: 0 10px;
            word-break: break-all;
            white-space: pre-wrap;
          }
          .con_all {
            width: 75%;
            justify-content: start;
            padding: 0 10px;
            flex-wrap: wrap;
            span {
              display: flex;
              align-items: center;
            }
          }
          .con_trans {
            flex-wrap: wrap;
            /deep/.el-radio-group {
              padding: 10px 0;
              .is-disabled {
                .is-checked {
                  .el-radio__inner {
                    border-color: #2b78f1 !important;
                    background: #2b78f1 !important;
                    &::after {
                      background-color: #ffffff;
                    }
                  }
                }
                .el-radio__inner {
                  border-color: #dcdfe6 !important;
                  background: #ffffff !important;
                }
                .el-radio__label {
                  color: #606266;
                }
              }
            }
            .week_input {
              width: 100%;
              border: 1px solid #d0d7e0;
              margin: 0 0 10px;
            }
          }
          .con_car {
            flex-direction: column;
            align-items: flex-start;
            .car_info {
              flex: 1;
              font-size: 12px;
              margin-top: 10px;
              &:last-child {
                margin-bottom: 10px;
              }
              span {
                margin-right: 5px;
                display: inline-block;
              }
            }
          }
          .el-date-editor {
            width: 100%;
          }
          .el-radio {
            margin-right: 10px;
          }
          /deep/.el-input__inner {
            border: none;
            border-radius: 0;
            width: 100%;
          }
        }
        .table_act {
          position: relative;
        }
      }
      .add_annex {
        display: flex;
        margin-top: 20px;
        .annex_upload {
          flex: 1;
        }
      }
    }
    .btn_check {
      margin-top: 10px;
      margin-right: 10px;
      text-align: right;
    }
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
}
.branch_dialog {
  /deep/.el-dialog__body {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0;
    .el-radio {
      margin-right: 20px;
    }
    .el-textarea {
      margin: 20px 0;
    }
    .btn_save {
      text-align: right;
    }
  }
  .form_box {
    background-color: #e9eff48f;
    padding: 10px 20px 0;
    margin-bottom: 10px;
    .box_head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24px;
      color: #4a79ba;
      margin-bottom: 10px;
      font-weight: 600;
      .right {
        cursor: pointer;
      }
    }
    .box_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .notice_form {
    margin: 0 auto;
    width: 100%;
    height: calc(100% - 110px);
    overflow-y: auto;
    padding-bottom: 20px;
    /deep/.el-form-item__label {
      font-weight: 600;
      color: #333;
    }
    /deep/.el-input {
      input {
        border-radius: 4px;
      }
    }
    /deep/.el-form-item {
      margin-bottom: 20px;
      width: 50%;
    }
  }
  .btn_add {
    text-align: center;
  }
}
</style>
